{% extends 'base.html' %}
{% load static %}
{% load persian %}

{% block title %}نتایج جستجو - {{ site_settings.site_name|default:"خبرگزاری ایثار" }}{% endblock %}

{% block content %}
<div class="category-header">
    <h2><i class="fas fa-search"></i> نتایج جستجو</h2>
    <p>نمایش نتایج برای عبارت: "{{ query }}"</p>
</div>

{% if query %}
    <div style="margin-bottom:20px; color:#7a7565; font-size:14px;">
        <i class="fas fa-newspaper"></i> تعداد کل نتایج: {{ page_obj.paginator.count|add:page_obj_gallery.paginator.count|add:page_obj_video.paginator.count|to_persian_num }} مورد
    </div>
    
    <!-- ===== نتایج اخبار ===== -->
    {% if page_obj %}
    <h3 style="color:var(--secondary-color); border-right:4px solid var(--secondary-color); padding-right:12px; margin:25px 0 15px; font-family:'B Nazanin', 'Tahoma', sans-serif;">
        <i class="fas fa-newspaper"></i> اخبار ({{ page_obj.paginator.count|to_persian_num }})
    </h3>
    {% for article in page_obj %}
    <div class="search-result-item">
        <h3><a href="{% url 'detail' article.id %}">{{ article.title }}</a></h3>
        <p>{{ article.summary|truncatewords:20 }}</p>
        <div class="meta">
            <span><i class="fas fa-calendar-alt"></i> {{ article.publish_time|date:"Y/m/d - H:i"|to_persian_num }}</span>
            {% if article.categories.all %}
            <span><i class="fas fa-tags"></i> 
                {% for cat in article.categories.all %}
                {{ cat.name }}{% if not forloop.last %}, {% endif %}
                {% endfor %}
            </span>
            {% endif %}
            <span><i class="fas fa-eye"></i> {{ article.views|to_persian_num }} بازدید</span>
        </div>
    </div>
    {% endfor %}
    
    <!-- صفحه‌بندی اخبار در جستجو -->
    {% if page_obj.has_other_pages %}
    <div class="pagination-container">
        {% if page_obj.has_previous %}
            <a href="?q={{ query }}&page={{ page_obj.previous_page_number }}" class="page-link"><i class="fas fa-chevron-right"></i> قبلی</a>
        {% else %}
            <span class="page-link disabled"><i class="fas fa-chevron-right"></i> قبلی</span>
        {% endif %}
        {% for num in page_obj.paginator.page_range %}
            {% if page_obj.number == num %}
                <span class="page-link active">{{ num|to_persian_num }}</span>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <a href="?q={{ query }}&page={{ num }}" class="page-link">{{ num|to_persian_num }}</a>
            {% endif %}
        {% endfor %}
        {% if page_obj.has_next %}
            <a href="?q={{ query }}&page={{ page_obj.next_page_number }}" class="page-link">بعدی <i class="fas fa-chevron-left"></i></a>
        {% else %}
            <span class="page-link disabled">بعدی <i class="fas fa-chevron-left"></i></span>
        {% endif %}
    </div>
    {% endif %}
    {% endif %}
    
    <!-- ===== نتایج گالری ===== -->
    {% if page_obj_gallery %}
    <h3 style="color:var(--secondary-color); border-right:4px solid var(--secondary-color); padding-right:12px; margin:25px 0 15px; font-family:'B Nazanin', 'Tahoma', sans-serif;">
        <i class="fas fa-images"></i> گالری‌ها ({{ page_obj_gallery.paginator.count|to_persian_num }})
    </h3>
    <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:15px;">
        {% for gallery in page_obj_gallery %}
        <div style="background:#fff; border-radius:12px; overflow:hidden; border-bottom:3px solid var(--secondary-color); box-shadow:0 2px 10px rgba(0,0,0,0.05);">
            <a href="{% url 'gallery_detail' gallery.slug %}">
                <img src="{{ gallery.cover_image.url }}" alt="{{ gallery.title }}" style="width:100%; height:150px; object-fit:cover;">
            </a>
            <div style="padding:10px 15px;">
                <h4 style="font-size:14px; font-weight:700;"><a href="{% url 'gallery_detail' gallery.slug %}">{{ gallery.title }}</a></h4>
                <div class="meta" style="font-size:12px; color:#b5b0a0;">
                    <span><i class="fas fa-image"></i> {{ gallery.images.count|to_persian_num }} تصویر</span>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- صفحه‌بندی گالری در جستجو -->
    {% if page_obj_gallery.has_other_pages %}
    <div class="pagination-container">
        {% if page_obj_gallery.has_previous %}
            <a href="?q={{ query }}&page_gallery={{ page_obj_gallery.previous_page_number }}" class="page-link"><i class="fas fa-chevron-right"></i> قبلی</a>
        {% else %}
            <span class="page-link disabled"><i class="fas fa-chevron-right"></i> قبلی</span>
        {% endif %}
        {% for num in page_obj_gallery.paginator.page_range %}
            {% if page_obj_gallery.number == num %}
                <span class="page-link active">{{ num|to_persian_num }}</span>
            {% elif num > page_obj_gallery.number|add:'-3' and num < page_obj_gallery.number|add:'3' %}
                <a href="?q={{ query }}&page_gallery={{ num }}" class="page-link">{{ num|to_persian_num }}</a>
            {% endif %}
        {% endfor %}
        {% if page_obj_gallery.has_next %}
            <a href="?q={{ query }}&page_gallery={{ page_obj_gallery.next_page_number }}" class="page-link">بعدی <i class="fas fa-chevron-left"></i></a>
        {% else %}
            <span class="page-link disabled">بعدی <i class="fas fa-chevron-left"></i></span>
        {% endif %}
    </div>
    {% endif %}
    {% endif %}
    
    <!-- ===== نتایج ویدئو ===== -->
    {% if page_obj_video %}
    <h3 style="color:var(--secondary-color); border-right:4px solid var(--secondary-color); padding-right:12px; margin:25px 0 15px; font-family:'B Nazanin', 'Tahoma', sans-serif;">
        <i class="fas fa-video"></i> ویدئوها ({{ page_obj_video.paginator.count|to_persian_num }})
    </h3>
    <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:15px;">
        {% for video in page_obj_video %}
        <div style="background:#fff; border-radius:12px; overflow:hidden; border-bottom:3px solid var(--secondary-color); box-shadow:0 2px 10px rgba(0,0,0,0.05); position:relative;">
            <a href="{% url 'video_detail' video.slug %}" style="display:block; position:relative;">
                <img src="{{ video.thumbnail.url }}" alt="{{ video.title }}" style="width:100%; height:150px; object-fit:cover;">
                <div style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; background:rgba(201,168,76,0.85); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px;">
                    <i class="fas fa-play"></i>
                </div>
            </a>
            <div style="padding:10px 15px;">
                <h4 style="font-size:14px; font-weight:700;"><a href="{% url 'video_detail' video.slug %}">{{ video.title }}</a></h4>
                <div class="meta" style="font-size:12px; color:#b5b0a0;">
                    <span><i class="fas fa-eye"></i> {{ video.views|to_persian_num }} بازدید</span>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <!-- صفحه‌بندی ویدئو در جستجو -->
    {% if page_obj_video.has_other_pages %}
    <div class="pagination-container">
        {% if page_obj_video.has_previous %}
            <a href="?q={{ query }}&page_video={{ page_obj_video.previous_page_number }}" class="page-link"><i class="fas fa-chevron-right"></i> قبلی</a>
        {% else %}
            <span class="page-link disabled"><i class="fas fa-chevron-right"></i> قبلی</span>
        {% endif %}
        {% for num in page_obj_video.paginator.page_range %}
            {% if page_obj_video.number == num %}
                <span class="page-link active">{{ num|to_persian_num }}</span>
            {% elif num > page_obj_video.number|add:'-3' and num < page_obj_video.number|add:'3' %}
                <a href="?q={{ query }}&page_video={{ num }}" class="page-link">{{ num|to_persian_num }}</a>
            {% endif %}
        {% endfor %}
        {% if page_obj_video.has_next %}
            <a href="?q={{ query }}&page_video={{ page_obj_video.next_page_number }}" class="page-link">بعدی <i class="fas fa-chevron-left"></i></a>
        {% else %}
            <span class="page-link disabled">بعدی <i class="fas fa-chevron-left"></i></span>
        {% endif %}
    </div>
    {% endif %}
    {% endif %}
    
    <!-- ===== اگر هیچ نتیجه‌ای وجود نداشت ===== -->
    {% if not page_obj and not page_obj_gallery and not page_obj_video %}
    <div style="text-align:center; padding:50px; background:#fff; border-radius:14px; color:#6c7065;">
        <i class="fas fa-info-circle" style="font-size:36px; display:block; margin-bottom:15px; color:var(--secondary-color);"></i>
        <h3 style="font-size:20px; font-weight:700;">نتیجه‌ای یافت نشد</h3>
        <p style="margin-top:10px;">عبارت "{{ query }}" در هیچ بخشی (اخبار، گالری، ویدئو) یافت نشد. لطفاً عبارت دیگری را جستجو کنید.</p>
    </div>
    {% endif %}
    
{% else %}
    <div style="text-align:center; padding:50px; background:#fff; border-radius:14px; color:#6c7065;">
        <i class="fas fa-search" style="font-size:36px; display:block; margin-bottom:15px; color:var(--secondary-color);"></i>
        <h3 style="font-size:20px; font-weight:700;">عبارت جستجو را وارد کنید</h3>
        <p style="margin-top:10px;">لطفاً یک عبارت برای جستجو در اخبار، گالری و ویدئوها وارد کنید.</p>
    </div>
{% endif %}
{% endblock %}